<template>
	<div>
		<HeaderNav :title="$t('m.headernav.MINE')" :showBack="false" />
	    <div class="Mine">
	    	
	        <div class="mine_message">
	            <img :src="userInfo.httpAvatar" class="head_portrait" />
	            <div class="message_text">
	                <div class="message_name">{{userInfo.name}}</div>
	                <div class="message_surplus">{{$t('m.msg.MONEY_HAVE')}}: {{formatMoney(userInfo.gold)}}{{$t('m.msg.DIAMOND')}}</div>
	            </div>
                <van-icon v-if="userInfo.grade == 'blueDiamond'" name="gem-o" info="vip" color="#2161A1" size="30px" />
           <van-icon v-if="userInfo.grade == 'anCrown'" name="bulb-o" info="vip" color= "#91A121" size="30px" />
	        </div>
            <router-link class="mine_li_container" v-for="(item,index) in list" :key="index" :to="item.url">
                <div class="mine_li_item">
                     <i :class=" `mine_li_img ${item.img}`"></i>
                    <!-- <van-icon name="arrow" color="#9EA0A0"/> -->
                    <div>{{item.title}}</div>
                </div>
                <van-icon name="arrow" color="#9EA0A0"/>
            </router-link>
	        <Footer :active="3" :chartFlag="chartFlag" />
	        
	    </div>
	</div>
</template>

<script>
    import {
        Icon,
        Tabbar,
        TabbarItem
    } from 'vant';
    import HeaderNav from '@/components/HeaderNav.vue'
    import Footer from '@/components/Footer.vue'
    import {getUser} from '@/api/session';
    import {formatMoney} from '@/api/query';
    export default {
        name: 'Mine',
        data() {
            return {
                userInfo: {},
                list:[{
                    title: this.$i18n.t('m.headernav.USERINFO2'),
                    url:'/userInfo?type=1',
                    img:'fa fa-university'
                },
                {
                    title: this.$i18n.t('m.headernav.UPGRADE'),
                    url:'/upgrade',
                    img:'fa fa-flash'
                },
                {
                    title: this.$i18n.t('m.headernav.PAY_MONEY'),
                    url:'/paymoney',
                    img:'fa fa-usd'
                },
                {
                    title: this.$i18n.t('m.headernav.SEELIST'),
                    url:'/seeList',
                    img:'fa fa-eye'
                },
                {
                    title: this.$i18n.t('m.headernav.VISITLIST1'),
                    url:'/visitList?type=1',
                    img:'fa fa-heartbeat'
                },
                {
                    title: this.$i18n.t('m.headernav.VISITLIST2'),
                    url:'/visitList?type=2',
                    img:'fa fa-bank'
                },
                {
                    title: this.$i18n.t('m.headernav.VISITLIST3'),
                    url:'/visitList?type=3',
                    img:'fa fa-thumbs-o-up'
                },
                {
                    title: this.$i18n.t('m.headernav.GIFT1'),
                    url:'/gift?type=1',
                    img:'fa fa-gift'
                },
                {
                    title: this.$i18n.t('m.headernav.GIFT2'),
                    url:'/gift?type=2',
                    img:'fa fa-gratipay'
                },
                {
                    title: this.$i18n.t('m.headernav.EMOJILIST'),
                    url:'/emojiList',
                    img:'fa fa-smile-o'
                },
                {
                    title: this.$i18n.t('m.headernav.SETTING'),
                    url:'/setting',
                    img:'fa fa-cog'
                }]
            }
        },
        props: {
            chartFlag: Boolean
        },
        components: {
            [Tabbar.name]: Tabbar,
            [TabbarItem.name]: TabbarItem,
            [Icon.name]: Icon,
            HeaderNav,
            Footer
        },
        methods: {
           formatMoney(money){
              return formatMoney(money);
           }
        },
        created(){
            this.userInfo = getUser();
            this.chartFlag = this.$parent.$data.chartFlag
        }

    }
</script>
<style scoped>
    .Mine {
        background-color: #E6FEFE;
        /*padding-top: 8vh;*/
        padding-bottom: 10vh;
    }

    .mine_message {
        width: 100%;
        height: 150px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .head_portrait {
        width: 100px;
        height: 100px;
        margin: 0px 20px;
    }

    .message_text {
        line-height: 50px;
    }

    .message_name {
        font-weight: bold;
    }

    .message_surplus {
        color: #b3b3b3;
    }

    .mine_li_container{
        display: flex;
        color: black;
        height: 8vh;
        padding: 0px 30px;
        font-size: 36px;
        align-items: center;
        justify-content: space-between;
    }

    .mine_li_item{
        display: flex;
        align-items: center;
        /* font-size:  */
    }

    .mine_li_img{
        font-size: 60px;
        width: 85px;
        justify-content: center;
    }
</style>